<template>
  <div class="userinfo-detail">
    <!-- header -->
    <WebHeader />

    <!-- 返回条 -->
    <div class="web-back-bars">
      <div class="web-back-bars__icon" @click="$router.back()">
        <img src="../../assets/back-icon.png">
      </div>
      <div class="web-back-bars__bednum">01</div>
      <div>123</div>
    </div>

    <!-- tabs切换 -->
    <div class="container">
      <div class="tabs">
        <template v-for="item in tabs">
          <el-badge :value="item.msgCount" :hidden="item.msgCount === 0" class="tabs-badge" :key="item.id">
            <div
              class="tabs-item" 
              :class="{ 'is-active': item.id === activeTab }" 
              :key="item.id" 
              @click="activeTab = item.id">
              {{ item.name }}
            </div>
          </el-badge>
        </template>
      </div>

      <!-- 组件切换 -->
      <component :is="activeTab"></component>
    </div>
  </div>
</template>

<script>
import WebHeader from '@/components/WebHeader'
import BasicInfo from './components/BasicInfo'
import RemindList from './components/RemindList'
import { Button, Badge } from 'element-ui'

export default {
  data () {
    return {
      tabs: [{
        id: 'BasicInfo',
        name: '基本信息',
        msgCount: 0
      },
      {
        id: 'RemindList',
        name: '强提醒',
        msgCount: 12
      }],
      activeTab : 'BasicInfo',
    }
  },
  components: {
    WebHeader,
    BasicInfo,
    RemindList,
    ElButton: Button,
    ElBadge: Badge
  }
}
</script>

<style lang="scss" scoped>
.userinfo-detail {
  background-color: #fff;
}
.web-back-bars {
  border-bottom: 24px solid #F2F2F2;
}
.container {
  width: 100%;
}
.tabs {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: 40px 0 19px 0;
  border: 1px solid rgba(0, 0, 0, 0.06);
  &-badge {
    margin-right: 88px;
  }
  &-item {
    width: 160px;
    height: 60px;
    border: 1px solid rgba(0, 0, 0, 0.14901960784313725);
    border-radius: 6px;
    font-size: 32px;
    font-weight: 400;
    line-height: 60px;
    color: #000000;
  }
  .is-active {
    background: #388FFB;
    color: #FFFFFF;
  }
}
</style>